<template>
  <div style="width: 100%;min-height: 100%">
    <div v-if="isEmpty" class="cart-empty">
      <img src="@/assets/cart-circle.svg">
      <span>空空如也...</span>
    </div>
    <div v-else>
      待完成...
    </div>

  </div>
</template>

<script>
import {PullRefresh} from 'vant'

export default {
  name: 'Cart',
  components: {
    PullRefresh
  },
  data () {
    return {
      isLoading: false,
      cartList: []
    }
  },
  created () {
    //  todo get cartList
  },
  methods: {
    getCartList () {
    },
    onRefresh () {
      setTimeout(() => {
        this.cartList.push(1)
        this.isLoading = false
      }, 1000)
    }
  },
  computed: {
    isEmpty () {
      return this.cartList.length === 0
    }
  }
}
</script>

<style scoped lang="less">

  .cart-empty {
    width: 100%;
    min-height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img {
      width: 50%;
      margin-top: 50%
    }

    span{
      color: darkgrey;
      font-size: 0.4rem;
    }

  }

</style>
